<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>坦克</title>
	<style type="text/css">
		input{font-size:26px;margin-top: 20px;}
		body{background-image: url('./img/grassland.png');}
		#mytank{position: absolute;left:10px;top:100px}
	</style>
</head>
<body>
	<img id="mytank" src="img/right.png"/>
</body>
 
<script>
	// 获取属性
	var Omg  = document.querySelector('img');
	// 获取图片
	var style = getComputedStyle(Omg);
	// 初始化图片位置
	var L = parseInt(style.left);
	var T = parseInt(style.top);
	//禁用右键 
	window.document.oncontextmenu = function(){
		return false;
	}
	diaotou = function(){
		alert("前方的区域以后再来探索吧！");		//到达边界进行提示
	}
	// 控制方向键
	window.onkeydown = function(e){
		switch(e.key){
			//按键 w W 方向键上键 控制坦克向上移动
			case "w":
			case "W":
			case 'ArrowUp':
				if(Omg.offsetTop<=0){		//判断坦克是否到达上边界     offsetTop ：元素到顶部的距离
					diaotou();
				}else{
					Omg.src="img/up.png";
					T=T-10;
					Omg.style.top = T + 'px';
				}
				break;
 			//按键 s S 方向键下键 控制坦克向下移动	
			case "s":
			case "S":
			case 'ArrowDown':
			if(Omg.offsetTop>=870){			//判断坦克是否到达下边界，此处以我自己的电脑屏幕为标准判断的
					diaotou();
				}else{
					Omg.src="img/down.png";
					T=T+10;
					Omg.style.top = T + 'px';
				}
				break;
			//按键 a A 方向键左键 控制坦克向左移动	
			case "a":
			case "A":
			case 'ArrowLeft':
			if(Omg.offsetLeft<=0){			//判断坦克是否到达左边界
					diaotou();
				}else{
					Omg.src="img/left.png";
					L=L-10;
					Omg.style.left = L + 'px';
				}
				break;
 			//按键 d D 方向键右键 控制坦克向右移动	
			case "d":
			case "D":
			case 'ArrowRight':
			if(Omg.offsetLeft>=1840){		//判断坦克是否到达右边界，此处以我自己的电脑屏幕为标准判断的
					diaotou();
				}else{
				Omg.src="img/right.png";
				L=L+10;
				Omg.style.left = L + 'px';
				}
				break;
		}
	}
</script>
</html>
